<template>
	<view>
		<view class="header-cont">
			<view class = "nav" catchtouchmove="true">
				<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">租房</view>
				<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">买房</view>
			</view>
		</view>
		<view class="body">
			<view class="content" v-if="navIndex==1">
				<view class="uni-flex uni-row" v-for="(i,index) in rent" :key="index">
					<rentinglist v-bind:rent="i"></rentinglist>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="uni-flex uni-row" v-for="(j,index2) in sell" :key="index2">
				<sellhouselist  v-bind:sell="j"></sellhouselist>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import rentinglist from '../common/rentinglist.vue';
import sellhouselist from '../common/sellhouselist.vue'

	export default {
		components:{
			rentinglist,
			sellhouselist
		},
		data() {
			return {
				userId:1,
				navIndex:1,
				sell:[],
				rent:[]
		}
		},
		mounted() {
			// this.getAllCencerns()	
		},
		onShow() {
			this.getAllCencerns()
		},
		methods: {
			checkIndex(index){
				this.navIndex = index;
			},
			getAllCencerns(){
				this.sell = []
				this.rent = []
				let data = {userId: this.user.userId}
				this.$axios.post('getAllConcerns',this.qs.stringify(data))
				.then(res => {
					this.concer1 = res.data.oneconcern
					this.concer2 = res.data.towConcern
					this.getHouse()
				})
			},
			getHouse(){
				this.$axios.post('getAllHouses')
				.then(res =>{
					this.house = res.data.allHouses
					this.getRenting()
					
				})
			},
			getRenting(){
				this.$axios.post('getAllRentings')
				.then(res =>{
					this.rentingHouse = res.data.allRentings
					for(let i=0 ; i < this.concer2.length ; i++){
						for(let j=0 ; j < this.house.length ; j++){
							for(let k=0 ; k < this.rentingHouse.length ; k++){
								if(this.concer2[i].houseId == this.house[j].houseId && this.concer2[i].houseId == this.rentingHouse[k].houseId){
									let temporary = {}
									temporary.houseId = this.concer2[i].houseId
									temporary.rentingHeading = this.rentingHouse[k].rentingHeading
									temporary.rentingPrice = this.rentingHouse[k].rentingPrice
									temporary.houseEstate = this.house[j].houseEstate
									temporary.houseArea = this.house[j].houseArea
									temporary.houseSurfaceplot = this.house[j].houseSurfaceplot
									temporary.houseDirection = this.house[j].houseDirection
									temporary.houseRegion = this.house[j].houseRegion
									temporary.houseCity = this.house[j].houseCity
									this.rent.push(temporary)
								}
							} 
						}
					}
					this.getSelling()
				})
			},
			getSelling(){
				this.$axios.post('getAllSells')
				.then(res =>{
					this.sellingHouse = res.data.allSells
					for(let i=0 ; i < this.concer1.length ; i++){
						for(let j=0 ; j < this.house.length ; j++){
							for(let k=0 ; k < this.sellingHouse.length ; k++){
								if(this.concer1[i].houseId == this.house[j].houseId && this.concer1[i].houseId == this.sellingHouse[k].houseId){
									let temporary = {}
									temporary.houseId = this.concer1[i].houseId
									temporary.sellHeading = this.sellingHouse[k].sellHeading
									temporary.sellPrice = this.sellingHouse[k].sellPrice
									temporary.houseArea = this.house[j].houseArea
									temporary.houseSurfaceplot = this.house[j].houseSurfaceplot
									temporary.houseDirection = this.house[j].houseDirection
									temporary.houseEstate = this.house[j].houseEstate
									this.sell.push(temporary)
								}
							}
						}
					}
				})
			},
		},
		computed: {
			...mapState(['user'])
		}
	}
</script>

<style>
	.nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	}

	.activite{
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}
	
	.nav>view{
		padding-bottom: 10rpx;
	}

	.box{
		background: #008000;
	}

	.body{
		overflow-y: scroll;  
	}

	.container {
	width: 100%;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	}
</style>
